<template>
  <div class="upload">
    <el-upload
      action=""
      :accept="acceptType"
      :show-file-list="false"
      :on-success="uploadSuccess"
      :onProgress="onFileProgress"
      :before-upload="beforeUpload"
      :http-request="uploadRequest"
      :multiple="multiple"
      :disabled="disable"
    >
      <slot v-if="customUploadBtn" name="uploadBtn"></slot>
      <el-button v-else type="primary" size="mini">{{ btnName }}</el-button>
    </el-upload>
    <div style="margin-top: 5px">
      <draggable
        v-model="attachs"
        handle=".attachMove"
        animation="150"
        ghostClass="dragClass"
      >
        <div
          class="attachsItem"
          v-for="(item, index) in attachs"
          :key="item.id"
        >
          <span class="attachMove" title="拖动排序"
            ><i
              style="font-size: 12px"
              class="V7_iconfont V7_iconV7tubiao_yidong"
            ></i
          ></span>
          <a :href="item.id" target="_blank" download>{{ item.name }}</a>
          <span class="attachDel" @click="attachDelFun(item, index)"
            ><i
              style="font-size: 12px"
              class="V7_iconfont V7_iconV7tubiao_guanbi"
            ></i
          ></span>
          <span title="预览" v-preview.delete="[item.name, item.id]"
            ><i
              style="font-size: 14px; margin-left: 8px; cursor: pointer"
              class="V7_iconfont V7_iconV7tubiao_kejian"
            ></i
          ></span>
        </div>
      </draggable>
    </div>
    <el-progress
      v-if="isShowProgress"
      :text-inside="false"
      :percentage="progress"
      :color="colors"
    ></el-progress>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Prop, Watch } from 'vue-property-decorator';
import { uploadQiniu } from '@/utils/upload'
import draggable from 'vuedraggable'
@Component({
  name: 'upload',
  components: {
    draggable
  }
})
export default class Uplodaer extends Vue {
  [x: string]: any
  @Prop() private acceptType // 上传文件类型
  @Prop({ default: 3 }) private limitNum // 上传文件限制数量
  @Prop({ default: '上传附件' }) private btnName // 按钮名称
  @Prop({ default: 10 }) private maxSize // 文件大小最大限制
  @Prop({ default: true }) private limitSize // 是否限制文件大小
  @Prop({ default: false }) private multiple // 是否一次上传多个
  @Prop({ default: false }) private customUploadBtn // 是否自定义上传按钮
  @Prop({ default: () => [] }) private fileList // 回显文件
  @Prop({ default: false }) private disable // 是否禁用按钮

  private colors: any = [
    { color: '#008CEE', percentage: 90 },
    { color: '#67C23A', percentage: 100 }
  ]

  private fileName = '' // 文件名称

  private progress: any = 0 // 上传进度

  public attachs: any = [] // 上传文件

  private isShowProgress: boolean = false // 是否显示上传文件进度条

  @Watch('fileList', { immediate: true, deep: true })
  private fileListExist (val) {
    this.attachs = val
  }

  private uploadError () { // 上传失败
    this.$message({ message: '文件上传失败，请重新选择文件上传', type: 'error' })
  }

  private uploadRequest (request: any) { // 七牛上传
    uploadQiniu({ type: 'common', fileName: this.fileName }, request)
  }

  private beforeUpload (file: any) { // 上传前验证文件合法性
    this.fileName = file.name.replace(/\s/g, '')
    if (this.attachs.length > (this.limitNum - 1)) {
      this.$message({ message: `最多只允许上传${this.limitNum}个附件`, type: 'error' })
      return false
    }
    if (this.limitSize && file.size / 1024 / 1024 > this.maxSize) {
      this.$message({ message: `附件大小不能超过${this.maxSize}M`, type: 'error' })
      return false
    }
    this.isShowProgress = true
    this.$emit('beforeUpload')
  }

  private uploadSuccess (data: any) { // 上传成功
    const initConfig = this.$store.state.common.initConfig
    this.attachs.push({ id: initConfig && data.key ? `${initConfig.qiniuDomainMap.common}/${data.key}` : '', name: this.fileName })
    this.isShowProgress = false
    this.progress = 0
    this.$emit('uploadSuccess', this.attachs) // 上传成功外抛事件
  }

  private onFileProgress (data: any) { // 上传进度
    this.progress = Math.ceil(data.percent)
  }

  private attachDelFun (item: any, index: number) { // 删除文件
    this.attachs.splice(index, 1)
    this.$emit('uploadDelete', this.attachs) // 删除外抛事件
  }
}
</script>
<style lang="stylus" scoped>
.attachsItem
  padding 8px 9px
  font-size 12px
  line-height 12px
  background #F1F8FD
  border-radius 4px
  color #008BEE
  display inline-block
  margin 0px 10px 10px 0px
  .attachMove
    margin-right 10px
    cursor move
  .attachDel
    margin-left 10px
    cursor pointer
</style>
